<template>
  <div class="tenant">
    <ParkList @change="handleChangePark" />
    <div class="tenant-right">
      <div class="custom-table-list-wrapper">
        <div class="search" :class="{ active: toggleSearchStatus }">
          <div class="search-left" ref="searchFromRef">
            <el-form class="search-form" inline>
              <el-form-item label="承租类型">
                <el-select
                  class="search-select"
                  v-model="searchParams.type"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="(item, index) of dictOptions['tenantType']"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="关键词">
                <el-input
                  class="search-input"
                  v-model="searchParams.name"
                  placeholder="请输入承租方名称、代码"
                  :suffix-icon="Search"
                  clearable
                ></el-input>
              </el-form-item>
            </el-form>
            <a
              class="search-left-toggle"
              v-if="showToggle"
              @click="handleToggleSearch"
            >
              <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
              {{ toggleSearchStatus ? '收起' : '展开' }}
            </a>
          </div>
          <div class="search-right">
            <el-button type="primary" @click="initTableList(1)"
              ><svg-icon name="search" size="14px" />搜索</el-button
            >
            <el-button @click="handleReset()"
              ><svg-icon name="reset" size="17px" />重置</el-button
            >
          </div>
        </div>
        <div class="content">
          <div class="content-operate">
            <el-button
              type="primary"
              @click="
                handleAdd('新增承租方信息', { parkId: searchParams.parkId })
              "
              ><svg-icon name="add" size="15px" />新增承租方信息</el-button
            >
          </div>
          <div class="content-table">
            <el-table class="custom-table" :data="tableData">
              <el-table-column type="index" label="序号" width="60px" />
              <el-table-column prop="name" label="承租方名称" />
              <el-table-column prop="type" label="承租方类型">
                <template #default="scope">
                  {{ getDictValue('tenantType', scope.row.type) }}
                </template>
              </el-table-column>
              <el-table-column prop="code" label="承租方代码" />
              <el-table-column prop="businessScope" label="经营范围" />
              <el-table-column prop="updateTime" label="更新时间" />
              <el-table-column label="操作" width="160px">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    @click="handleDetail(scope.row)"
                    >详情</el-button
                  >
                  <el-button
                    link
                    type="primary"
                    @click="handleEdit(scope.row, '编辑承租方信息')"
                    >编辑</el-button
                  >
                  <el-button link type="danger" @click="handleDelete(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="content-page">
            <el-pagination
              class="custom-pagination"
              :current-page="paginationParams.pageIndex"
              :page-size="paginationParams.pageSize"
              background
              :page-sizes="[10, 20, 30, 50]"
              layout="total, prev, pager, next, sizes, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="initTableList"
            />
          </div>
        </div>
        <AddDialog ref="addRef" :detail="currentDetail" @close="handleClose" />
        <DetailDialog
          ref="detailRef"
          :detail="currentDetail"
          @close="handleClose"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useTableList } from '@/hooks/useTableList'
import ParkList from '@/components/parkList/index.vue'
import AddDialog from './add.vue'
import DetailDialog from './detail.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDict } from '@/hooks/useDict'
const {
  dictOptions,
  initListDictOptions,
  initTreeDictOptions,
  getDictValue,
  getDictStyle,
} = useDict()
import { tenantPageList, tenantDelete } from '@/api/manager/dataManage/tenant'
const searchParams = ref({
  parkId: '',
})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, tenantPageList, tenantDelete)

const handleChangePark = (val) => {
  searchParams.value.parkId = val
  initTableList(1)
}

onMounted(() => {
  initListDictOptions(['tenantType'])
  initTableList(1)
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';
.tenant {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  &-right {
    flex: 1;
    height: 100%;
    &-bottom {
      width: 100%;
      height: calc(100% - 50px);
      overflow-y: hidden;
    }
  }
}
.custom-table {
  position: absolute;
}
</style>
